<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>统计</title>
	<link href="/static/lunch/css/bootstrap.min.css" rel="stylesheet">
	<link href="/static/lunch/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
	<style>
.badge-hot {
	background-color: red;
}
	</style>
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 100px;">
	<div class="col-md-2"></div>

	<div class="col-md-8">
		<div class="panel panel-primary">
			<div class="panel-heading">  费用统计  当前显示日期: {{cur_date}} 
				<span class="glyphicon glyphicon-calendar datetimepicker"></span>
			</div>
			<table class="table table-hover">
				<tr>
					<th>员工</th>
					<th>所点菜品</th>
					<th>员工付</th>
					<th>公司付</th>
				</tr>

				{% for record in records %}
				<tr>
					<td>
					{% if record.user.name %}
						{{record.user.name}}
					{% else %}
						{{record.user.user}}
					{% endif %}
					</td>
					<td>
						{% for food_record in record.user.today_foods %}
						<p data_price="{{food_record.price}}" class="food_price">{{food_record.food}}</p>
						{% endfor %}
					</td>
					<td class="epaid">{{record.epaid}}</td>
					<td class="cpaid">{{record.cpaid}}</td>
				</tr>
				{% empty %}
				<tr><td colspan="5" style="text-align: center;">暂无</td></tr>
				{% endfor %}
				
				{% if records %}
				<tr>
					<td>合计</td>
					<td id="sum_food_price"></td>
					<td id="sum_epaid"></td>
					<td id="sum_cpaid"></td>
				</tr>
				{% endif %}
			</table>
		</div>
	</div>

	<div class="col-md-2"></div>
</div>
</div>

<script src="/static/lunch/js/jquery-1.9.1.min.js"></script>
<script src="/static/lunch/js/bootstrap.min.js"></script>
<script src="/static/lunch/js/bootstrap-datetimepicker.min.js"></script>
<!--[if lt IE 9]>
  <script src="/static/lunch/js/html5shiv.js"></script>
  <script src="/static/lunch/js/respond.min.js"></script>
<![endif]-->
<script>
Date.prototype.Format = function(fmt)   
{ //author: meizz   
  var o = {   
    "M+" : this.getUTCMonth()+1,
    "d+" : this.getUTCDate(),                    //日   
    "h+" : this.getUTCHours(),                   //小时   
    "m+" : this.getUTCMinutes(),                 //分   
    "s+" : this.getUTCSeconds(),                 //秒   
    "q+" : Math.floor((this.getUTCMonth()+3)/3), //季度   
    "S"  : this.getUTCMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt))   
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
  return fmt;   
}

var compute_sum = function() {
	var food_price_els = $("p.food_price");
	var epaid_els = $(".epaid");
	var cpaid_els = $(".cpaid");
	var sum_price = 0.0, epaid = 0.0, cpaid = 0.0;
	
	for(var i=0; i != food_price_els.length; ++i) {
		var cur = parseFloat($(food_price_els[i]).attr("data_price"));
		sum_price += cur;
	}
	$("#sum_food_price").text(sum_price);
	
	for(var i=0; i != epaid_els.length; ++i) {
		var cur = parseFloat(epaid_els[i].innerHTML);
		epaid += cur;
	}
	$("#sum_epaid").text(epaid);

	for(var i=0; i != cpaid_els.length; ++i) {
		var cur = parseFloat(cpaid_els[i].innerHTML);
		cpaid += cur;
	}
	$("#sum_cpaid").text(cpaid);
};


$(document).ready(compute_sum);

$(".datetimepicker").datetimepicker({
	startView: 2,
	minView: 2,
	todayBtn: true,
	autoclose: true
}).on('changeDate', function(ev) {
	$.ajax({
		url: "/lunch/tongji/" + ev.date.Format('yyyyMMdd') + "/",
		success: function(obj) {
			var doc = $(obj);
			$("table.table").html($("table.table", doc).html());
			compute_sum();
		},
		error: function(ehr, err) {
			//
		}
	});
});
</script>
</body>
</html>
